<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    /* #a{
        float: left;
        margin: 10px;
    } */
    #b{
        float:right;
        /* height: 40px;*/
        /* line-height: 10px; */
        font-size: 30px;
        background-color:lightcyan;
        padding:10px;
        border:2px solid rgba(127, 255, 212, 0.555);
        margin-top: 40px;
    }
    #d{
        float:right;
        position:relative;
        left:120px;
        top:15px;
    }
    #div2{
        margin-top:5px;
        margin-bottom: 10px;
        background-image: url("imgs/menuBg.jpg");
        background-repeat: no-repeat;
        background-size: 100%;
        padding:15px;
    }
    .c{
        display: inline;
        padding-left:20px;
        padding-right: 20px;
        font-size: 30px;
        color:white;
    }

    #div4{
        float: left;
        margin:10px;
        height: 550px;
        border: 2px solid greenyellow;
    }

    .bang{
        float:left;
        position:relative;
        left: -15px;
        top:20px;
    }

    .book1{
        float:left;
        position:relative;
        left:-370px;
        top:70px;
    }
    .book_img1{
        float:left;
        position:relative;
        left:10px;
        top:50px;
        z-index: 0;
    }
    .book_jieshao1{
        float:left;
        position:relative;
        left:-5px;
        top:70px;
        line-height:35px;
    }

    .book2{
        float:right;
        position:relative;
        top: 50px;
        right: 200px;
        z-index: 0;
    }
    .book_img2{
        position:relative;
        top:70px;
        right:120px;
    }
    .book_jieshao2{
        position:relative;
        right:-70px;
        top:-100px;
        line-height:35px;
    }
    .book3{
        float:right;
        position:relative;
        right:400px;
        z-index: 0;
    }
    .book_img3{
        position:relative;
        right:180px;
    }
    .book_jieshao3{
        float:left;
        position:relative;
        right: -15px;
        top:-150px;
        line-height:35px;
    }

    .no1{
        float:left;
        position:relative;
        left:80px;
        top:40px;
        z-index: 20;
    }

    .no2{
        float:left;
        position:relative;
        left:-70px;
        top:50px;
        z-index: 20;
    }

    .no3{
        float:left;
        position:relative;
        left:-130px;
        top:-10px;
        z-index: 20;
    }

    
    .price{
        color: brown;
        font-weight : bold;
    }

    .zhekou{
        color:darkseagreen;
    }

    .book_name{
        color:cornflowerblue;
        font-size: 25px;
    }
    .book_neirong{
        font-size:20px;
    }

    .validate{
        float:left;
        position: relative;
        left:50%;
    }

    #bottom1{
        float:left;
        position: relative;
        left:21%;
    }

    #bottom2{
        float: right;;
        position: relative;
        right: 18%;
    }
    .bottom{
        line-height: 40px;
        color:gray;
        font-size: 20px;
    }


</style>
<body>

    <div id="div1">

        <img src="imgs/logo.jpg" alt="图片加载失败" width="250px" height="100px">
        <div id="b">
            尾品汇  当当优品  数字馆  都看阅器
        </div>
        <div id="d">
            <img src="imgs/icon_count.png" alt="图片加载失败" height="30px">
        </div> 
    </div>

    <div id="div2">

        <div class="c">
                首页
        </div>
        <div class="c">
                图书
        </div>
        <div class="c">
                音像
        </div>
        <div class="c">
                童装
        </div>
        <div class="c">
                服装
        </div>
        <div class="c">
                鞋靴
        </div>
        <div class="c">
                运动
        </div>
        <div class="c">
                箱包
        </div>
        <div class="c">
                美妆
        </div>
        <div class="c">
                珠宝
        </div>
        <div class="c">
                家居
        </div>
        <div class="c">
                食品
        </div>
        <div class="c">
                酒
        </div>
        <div class="c">
                手机
        </div>
        <div class="c">
                数码
        </div>
        <div class="c">
                电脑
        </div>
        <div class="c">
                家电
        </div>
    </div>

    <div id="div3">
        <img src="imgs/banner.png" alt="图片加载失败" width="100%">
    </div>

    <div id="div4">
        <div class="bang">
            <img src="imgs/bg_bang.gif" alt="图片加载失败" height="60px"> 
        </div>

        <div class="book1">
            <div class="no1">
                <img src="imgs/bookNo1.gif" alt="图片加载失败" height="80px">
            </div>
            <div class="book_img1">
                <img src="imgs/book-01.jpg" alt="图片加载失败" width="400px" height="400px">
            </div>
            <div class="book_jieshao1">
                <span class="book_name">
                    偷影子的人
                </span> 
                <br/>
                <span class="book_neirong">
                    作者：[法] 马克·李维（Marc Levy）著
                    <br/>
                    出版社：湖南文艺出版社
                    <br/>
                    当当价：<span class="price">￥17.90</span>
                    <br/>
                    不知道姓氏的克蕾儿。这就是你在我生命里的角色，
                    <br/>
                    我童年时的小女孩，今日蜕变成了女人，一段青梅竹
                    <br/>
                    马的回忆，一个时间之神没有应允的愿望。一个老
                    <br/>
                    是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊
                    <br/>
                    能力而强大：他能”偷别人的影子“
                </span>
            </div>
        </div>

        <div class="book2">
            <div class="no2">
                    <img src="imgs/bookNo2.gif" alt="图片加载失败" height="60px">
            </div>
            <div class="book_img2">
                <img src="imgs/book-02.jpg" alt="图片加载失败"width="150px" height="150px">
            </div>
            <div class="book_jieshao2">
                <span class="book_name">
                    看见(央视知名记者、主持人柴静：十年个人
                    <br/>
                    成长的告白，中国社会变迁的备忘
                </span> 
                <br/>
                <span class="book_neirong">
                    作者：柴静 著
                    <br/>
                    出版社：广西师范大学出版社
                    <br/>
                    <span class="price">￥29.40</span>
                    <span class="zhekou">7.4折</span>
                </span>
            </div>
        </div>

        <div class="book3">
            <div class="no3">
                    <img src="imgs/bookNo3.gif" alt="图片加载失败" height="60px">
            </div>
            <div class="book_img3">
                <img src="imgs/book-03.jpg" alt="图片加载失败"width="150px" height="150px">
            </div> 
            <div class="book_jieshao3">
                    <span class="book_name">
                        改变孩子先改变自己
                    </span> 
                    <br/>
                    <span class="book_neirong">
                        作者：贾容韬 贾毅 著
                        <br/>
                        出版社：作家出版社
                        <br/>
                        <span class="price">￥22.20</span>
                        <span class="zhekou">7.4折</span>
                    </span>
                </div>
            </div>

    </div>

    <div id="div5">
        <div class="validate">
            <img src="imgs/validate.gif" alt="图片加载失败">
        </div>

        <div id="bottom1" class="bottom">
            Copyright(C)&nbsp当当网&nbsp2014-2017，All Rights Reserved
        </div>

        <div id="bottom2" class="bottom">
            京ICP证041189号出版物经营许可证&nbsp新出发京批字第直0673号
        </div>

    </div>


</body>
</html>